<template>
  <div class="flexCount">
    <div class="headTop"></div>
    <div class="fontColor">
      颜色值： {{ theme }}
      <Button @click="value = true" type="primary" style="margin-left: 20px"
        >换肤</Button
      >
      <Button type="primary" ghost style="margin-left: 20px">透明按钮</Button>
      <div class="mt">开关： <Switch v-model="value2" /></div>

      <Drawer title="换肤" :closable="false" v-model="value" width="400">
        <Space style="margin-left: 20px">
          主题颜色： <ColorPicker v-model="theme" @on-change="onChange" />
        </Space>
        <Space style="margin-left: 20px; margin-top: 20px">
          主题风格：
          <RadioGroup v-model="sideTheme" type="button" @on-change="onChange2">
            <Radio label="light"></Radio>
            <Radio label="dark"></Radio>
          </RadioGroup>
        </Space>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import useSettingsStore from "@/store/modules/settings";
import { handleThemeStyle } from "@/utils/theme";
const settingsStore = useSettingsStore();
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const storeSettings = computed(() => settingsStore);
const value = ref(false);
const value2 = ref(true);
const onChange = (val) => {
  console.log(val, "我是选中的颜色值");
  // window.less.modifyVars({ "@primary-color": val });
  settingsStore.theme = val;
  handleThemeStyle(val);
  let layoutSetting = {
    theme: storeSettings.value.theme,
    sideTheme: storeSettings.value.sideTheme,
  };
  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
};
const onChange2 = (val) => {
  console.log(val, "我是选中的主题");
  settingsStore.sideTheme = val;
  let layoutSetting = {
    theme: storeSettings.value.theme,
    sideTheme: storeSettings.value.sideTheme,
  };
  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
};
</script>

<style lang="less" scoped>
.mt {
  margin-top: 10px;
}
.flexCount {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.headTop {
  background-color: var(--current-color);
  height: 100px;
}

.fontColor {
  color: var(--current-color);
  margin-top: 20px;
}
.ivu-btn-primary,
.ivu-btn-primary:hover {
  background-color: var(--current-color);
  border-color: var(--current-color);
}

.ivu-btn-ghost.ivu-btn-primary,
.ivu-btn-ghost.ivu-btn-primary:hover {
  color: var(--current-color);
  background: rgba(245, 249, 254, 0.5);
}

// 分页
.ivu-page-item:hover {
  border-color: var(--current-color);
}
.ivu-page-item-active {
  border-color: var(--current-color);
}
.ivu-page-item-active a,
.ivu-page-item-active:hover a {
  color: var(--current-color);
}
.ivu-page-item:hover a {
  color: var(--current-color);
}
a {
  color: var(--current-color);
}
.ivu-page-prev:hover,
.ivu-page-next:hover {
  border-color: var(--current-color);
}

.ivu-switch-checked {
  border-color: var(--current-color);
  background-color: var(--current-color);
}
</style>
